doctype html
head
    title Socket.IO chat
    style.
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font: 13px Helvetica, Arial; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
        form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
        form input[type="text"] { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
        form input[type="submit"] { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
    //- <script src="/socket.io/socket.io.js"></script>, 可以用这种方式, 也可以用下面的直接使用 CDN 的方式, 还可以 require('socket.io-client')
    //- That’s all it takes to load the socket.io-client, which exposes a io global, and then connect.
    script(src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js")
    script(src="https://code.jquery.com/jquery-1.11.1.js")
    script.
        var socket = io();
        $(function () {
            var socket = io();
            $('form').submit(function(){
                socket.emit('chat message', $('form>input[type="text"]').val());
                $('form>input[type="text"]').val('')
                return false;
            });
            socket.on('chat message', function(msg){
                $('#messages').append($('<li>').text(msg));
            });
        });
ul#messages
form(action="")
    input(type="text" value="Hello, World!")
    input(type="submit" value="send")
    //- input 三要素 type name value, 这里的 input(type="submit") 可以换为 button send, 默认也是触发 $('form').submit()
